<template>
  <div class="user-chat">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" title="小智同学">
      <van-icon
        slot="left"
        name="arrow-left"
        @click="$router.back()"
      />
    </van-nav-bar>
    <!-- /导航栏 -->

    <!-- 消息列表 -->
    <van-cell-group class="message-list">
      <van-cell title="单元格" v-for="item in 29" :key="item" />
    </van-cell-group>
    <!-- /消息列表 -->

    <!-- 发送消息 -->

    <van-cell-group class="send-message-wrap">
      <van-field
        v-model="message"
        :border="false"
        placeholder="请输入消息"
      />
      <van-button type="primary" size="small">发送</van-button>
    </van-cell-group>

    <!-- /发送消息 -->
  </div>
</template>

<script>
// import { io } from 'socket.io-client'

// 建立连接
// const socket = io('http://api-toutiao-web.itheima.net')

// socket.on('connect', function() {
//   console.log('连接建立成功了')
// })
// // socket.on('event', function(data) {})
// socket.on('disconnect', function() {
//   console.log('断开连接了')
// })

export default {
  name: 'UserChat',
  components: {},
  props: {},
  data() {
    return {
      message: ''
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  // 方法集合
  methods: {}
}
</script>

<style lang="less" scoped>
.user-chat {
  .van-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .message-list {
    position: fixed;
    left: 0;
    right: 0;
    top: 46px;
    bottom: 44px;
    overflow-y: auto;
  }
  .send-message-wrap {
    position: fixed;
    display: flex;
    padding: 0 14px;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
  }
  .van-button--small {
    width: 128px;
  }
}
</style>
